<template>
  <div class="questionnaire">
    <div class="create-qn" v-if="isProcessing">
      <header>创建问卷</header>
      <div class="create-qn-content">
        <h4>输入标题创建</h4>
          <el-input v-model="questionnaire.title" placeholder="请输入标题" @input="handleChange" @blur="handleChange"></el-input>
          <label v-show="isSubmit">请输入标题</label>
          <el-button type="primary" @click="submitQnTitle">立即创建</el-button>
      </div>
    </div>
    <div class="questionnaire-content" v-else>
      <div class="form-content">
        <!-- 问卷标题和说明 -->
        <div class="form-title" @click="handleOpenEditTitle">
          <h2>{{ questionnaire.title }}</h2>
          <div class="explain" v-html="questionnaire.desc"></div>
        </div>
        <!-- <div class="first-page paging hover">
          <div class="page-number">【 第 1 页，共 {{ questionnaireList.page }} 页 】</div>
          <div class="foot-tool">
            <div class="foot-tool-left" @click="handleIsInsertTopic(topic, ind)">
              {{ insertTopic }}
              <div class="addTopic">
                <button v-for="(btn, btnInd, ind) in addTopic" :key="btnInd" @click="handleAddTopic(btn, btnInd, ind)">{{ typeDict[btn.type] }}</button>
              </div>
            </div>
            <div class="foot-tool-right">
              <div class="btn" @click="handleBtnEdit(topic, ind)">编辑</div>
              <div class="btn" @click="handleBtnCopy(topic, ind)">复制</div>
              <div class="btn" @click="handleBtnDel(topic, ind)">删除</div>
              <div class="btn" @click="handleBtnUp(topic, ind)">上移</div>
              <div class="btn" @click="handleBtnDown(topic, ind)">下移</div>
            </div>
          </div>
        </div> -->
        <!-- vfor渲染其他选项 -->
        <div v-for="(topic, ind) in questionnaireList" :key="topic.id">
          <!-- 分页 -->
          <div class="paging" v-if="topic.type == 0"
            :class="{'hover': topic.isHover}"
            @mouseenter="handleMouseenter(topic)"
            @mouseleave="handleMouseleave(topic)"
          >
            <div class="page-number">【 第 {{ getNumOfPage(questionnaireList, topic).pageNo }} 页，共 {{  getNumOfPage(questionnaireList, topic).pageSize }} 页 】</div>
            <div class="foot-tool">
              <div class="foot-tool-left" @click="handleIsInsertTopic(topic, ind)">
                {{ insertTopic }}
                <div class="addTopic" v-show="topic.isOpenInsertDialog">
                  <button v-for="(btn, btnInd) in addTopic" :key="btnInd" @click="handleAddTopic(btn, btnInd, ind)">{{ typeDict[btn.type] }}</button>
                </div>
              </div>
              <div class="foot-tool-right" v-show="getNumOfPage(questionnaireList, topic).pageNo != 1">
                <!-- <div class="btn" @click="handleBtnEdit(topic, ind)">编辑</div>
                <div class="btn" @click="handleBtnCopy(topic, ind)">复制</div> -->
                <div class="btn" @click="handleBtnDel(topic, ind)">删除</div>
                <div class="btn" @click="handleBtnUp(topic, ind)">上移</div>
                <div class="btn" @click="handleBtnDown(topic, ind)">下移</div>
                <div class="btn" @click="handleBtntoUp(topic, ind)">置顶</div>
                <div class="btn" @click="handleBtntoDown(topic, ind)">置底</div>
              </div>
            </div>
          </div>
          <!-- 段落 -->
          <div class="other-topic" v-else-if="topic.type == 1"
            :class="{'hover': topic.isHover}"
            @mouseenter="handleMouseenter(topic)"
            @mouseleave="handleMouseleave(topic)"
          >
            <div class="paragraph" v-html="topic.title"></div>
            <div class="foot-tool">
              <div class="foot-tool-left" @click="handleIsInsertTopic(topic, ind)">
                {{ insertTopic }}
                <div class="addTopic" v-show="topic.isOpenInsertDialog">
                  <button v-for="(btn, btnInd) in addTopic" :key="btnInd" @click="handleAddTopic(btn, btnInd, ind)">{{ typeDict[btn.type] }}</button>
                </div>
              </div>
              <div class="foot-tool-right">
                <div class="btn" @click="handleBtnEdit(topic, ind)">编辑</div>
                <div class="btn" @click="handleBtnCopy(topic, ind)">复制</div>
                <div class="btn" @click="handleBtnDel(topic, ind)">删除</div>
                <div class="btn" @click="handleBtnUp(topic, ind)">上移</div>
                <div class="btn" @click="handleBtnDown(topic, ind)">下移</div>
                <div class="btn" @click="handleBtntoUp(topic, ind)">置顶</div>
                <div class="btn" @click="handleBtntoDown(topic, ind)">置底</div>
              </div>
            </div>
            <!-- 编辑弹窗 -->
            <div class="edit-function" v-if="topic.isShowEdit">
              <Editor height="100" :value="editorTitle" @on-change="editorOnChange"/>
              <!-- <el-input style="margin-bottom: 10px;" type="textarea" :row="5" v-model="topic.title"></el-input> -->
              <button class="sureBtn" @click="submitEditRes(topic)">完&nbsp;成&nbsp;编&nbsp;辑</button>
            </div>
          </div>
          <!-- 单选 -->
          <div class="other-topic" v-else-if="topic.type == 2"
            :class="{'hover': topic.isHover}"
            @mouseenter="handleMouseenter(topic)"
            @mouseleave="handleMouseleave(topic)"
          >
            <div class="radio">
              <div class="radioandCheckboxTitle">
                <span :class="{'addRequired': topic.isRequired == 1}">{{ getTopicOrder(topic) }}、</span>
                <span v-html="topic.title"></span>
              </div>
              <div class="titleHint" v-show="topic.titleHint != ''" v-html="topic.titleHint"></div>
              <div class="radioandCheckboxOption" v-for="(radio, ind) in topic.solutionDtos" :key="ind">
                <div :class="{'optionAll': radio.file != ''}">
                  <div class="optiontit">
                    <div class="radioCircle"></div>
                    <div class="radioandCheckboxOptionFont">{{ radio.title }}</div>
                  </div>
                  <div class="optImg" v-show="radio.file != ''">
                    <img :src="radio.file" alt="选项文件">
                  </div>
                </div>
                <div class="optImgAndDesc">
                  <div class="optDesc" v-show="radio.desc != ''" v-html="radio.desc"></div>
                </div>
              </div>
            </div>
            <div class="foot-tool">
              <div class="foot-tool-left" @click="handleIsInsertTopic(topic, ind)">
                {{ insertTopic }}
                <div class="addTopic" v-show="topic.isOpenInsertDialog">
                  <button v-for="(btn, btnInd) in addTopic" :key="btnInd" @click="handleAddTopic(btn, btnInd, ind)">{{ typeDict[btn.type] }}</button>
                </div>
              </div>
              <div class="foot-tool-right">
                <div class="btn" @click="handleBtnEdit(topic, ind)">编辑</div>
                <div class="btn" @click="handleBtnCopy(topic, ind)">复制</div>
                <div class="btn" @click="handleBtnDel(topic, ind)">删除</div>
                <div class="btn" @click="handleBtnUp(topic, ind)">上移</div>
                <div class="btn" @click="handleBtnDown(topic, ind)">下移</div>
                <div class="btn" @click="handleBtntoUp(topic, ind)">置顶</div>
                <div class="btn" @click="handleBtntoDown(topic, ind)">置底</div>
              </div>
            </div>
            <!-- 编辑弹窗 -->
            <div class="edit-function" v-if="topic.isShowEdit">
              <Editor height="100" :value="editorTitle" @on-change="editorOnChange"/>
              <div class="dynamic-edit">
                <header>
                  <el-select size="small" v-model="topic.type" @change="handleSelectTopic($event, topic, ind)" placeholder="请选择">
                    <el-option
                      v-for="(val, key) in typeDict2"
                      :key="key"
                      :label="val.label"
                      :value="val.value">
                    </el-option>
                  </el-select>
                  <div class="requiredDiv">
                    <input v-model="topic.isRequired" type="checkbox" id="required">
                    <label for="required">必答</label>
                  </div>
                  <a href="javascript:;" @click="handleTitleHint(topic, ind)">填写提示</a>
                </header>
                <div class="edit-content"  v-show="topic.type != 6">
                  <div class="editTitle">
                    <div>选项文字</div>
                    <div>图片</div>
                    <div>说明</div>
                    <div v-show="topic.type == 3 || topic.type==5">分数</div>
                    <div>上移下移</div>
                  </div>
                  <div class="vforRender" v-for="(opt, optInd) in topic.solutionDtos" :key="opt.sort">
                    <div class="firstdiv">
                      <input v-model="opt.title" type="text">
                      <div class="addCircleBtn" @click="handleAddOpt(opt, optInd, topic)">+</div>
                      <div class="addCircleBtn" @click="handlesubCurOpt(opt, optInd, topic)">-</div>
                    </div>
                    <div class="imgandexplain" @click="handleImgOrExplain('img', opt, optInd, topic)">
                      <img v-if="opt.file" style="height: 23px;" :src="opt.file"/>
                      <span v-else>图片上传</span>
                    </div>
                    <div class="imgandexplain" @click="handleImgOrExplain('explain', opt, optInd, topic)">添加说明</div>
                    <div v-show="topic.type == 3 || topic.type==5" class="scoreclass">
                      <div><input :disabled="opt.titleValDisabled" v-model.number="opt.titleValue" type="number"></div>
                      <div class="requiredDiv">
                        <input v-model="opt.titleValDisabled" @change="handleisScoringChange($event, opt)" type="checkbox" :id="`bujifen${opt.sort}`">
                        <label :for="`bujifen${opt.sort}`">不计分</label>
                      </div>
                    </div>
                    <div class="upAndDown">
                      <span @click="handleMoveUp(opt, optInd, topic)">↑</span>
                      <span @click="handleMoveDown(opt, optInd, topic)">↓</span>
                    </div>
                  </div>
                </div>
                <button class="sureBtn" @click="submitEditRes(topic)">完&nbsp;成&nbsp;编&nbsp;辑</button>
              </div>
            </div>
          </div>
          <!-- 计分单选 -->
          <div class="other-topic" v-else-if="topic.type == 3"
            :class="{'hover': topic.isHover}"
            @mouseenter="handleMouseenter(topic)"
            @mouseleave="handleMouseleave(topic)"
          >
            <div class="radio">
              <div class="radioandCheckboxTitle">
                <span :class="{'addRequired': topic.isRequired == 1}">{{ getTopicOrder(topic) }}、</span>
                <span v-html="topic.title"></span>
              </div>
              <div class="titleHint" v-show="topic.titleHint != ''" v-html="topic.titleHint"></div>
              <div class="radioandCheckboxOption" v-for="(radio, ind) in topic.solutionDtos" :key="ind">
                <div :class="{'optionAll': radio.file != ''}">
                  <div class="optiontit">
                    <div class="radioCircle"></div>
                    <div class="radioandCheckboxOptionFont">{{ radio.title }}</div>
                    <div class="scoreMark">（分值：{{ radio.titleValue }}）</div>
                  </div>
                  <div class="optImg" v-show="radio.file != ''">
                    <img :src="radio.file" alt="选项文件">
                  </div>
                </div>
                <div class="optImgAndDesc">
                  <div class="optDesc" v-show="radio.desc != ''" v-html="radio.desc"></div>
                </div>
              </div>
            </div>

            <div class="foot-tool">
              <div class="foot-tool-left" @click="handleIsInsertTopic(topic, ind)">
                {{ insertTopic }}
                <div class="addTopic" v-show="topic.isOpenInsertDialog">
                  <button v-for="(btn, btnInd) in addTopic" :key="btnInd" @click="handleAddTopic(btn, btnInd, ind)">{{ typeDict[btn.type] }}</button>
                </div>
              </div>
              <div class="foot-tool-right">
                <div class="btn" @click="handleBtnEdit(topic, ind)">编辑</div>
                <div class="btn" @click="handleBtnCopy(topic, ind)">复制</div>
                <div class="btn" @click="handleBtnDel(topic, ind)">删除</div>
                <div class="btn" @click="handleBtnUp(topic, ind)">上移</div>
                <div class="btn" @click="handleBtnDown(topic, ind)">下移</div>
                <div class="btn" @click="handleBtntoUp(topic, ind)">置顶</div>
                <div class="btn" @click="handleBtntoDown(topic, ind)">置底</div>
              </div>
            </div>
            <!-- 编辑弹窗 -->
            <div class="edit-function" v-if="topic.isShowEdit">
              <Editor height="100" :value="editorTitle" @on-change="editorOnChange"/>
              <div class="dynamic-edit">
                <header>
                  <el-select size="small" v-model="topic.type" @change="handleSelectTopic($event, topic, ind)" placeholder="请选择">
                    <el-option
                      v-for="(val, key) in typeDict2"
                      :key="key"
                      :label="val.label"
                      :value="val.value">
                    </el-option>
                  </el-select>
                  <div class="requiredDiv">
                    <input v-model="topic.isRequired" type="checkbox" id="required">
                    <label for="required">必答</label>
                  </div>
                  <a href="javascript:;" @click="handleTitleHint(topic, ind)">填写提示</a>
                </header>
                <div class="edit-content"  v-show="topic.type != 6">
                  <div class="editTitle">
                    <div>选项文字</div>
                    <div>图片</div>
                    <div>说明</div>
                    <div v-show="topic.type == 3 || topic.type==5">分数</div>
                    <div>上移下移</div>
                  </div>
                  <div class="vforRender" v-for="(opt, optInd) in topic.solutionDtos" :key="opt.sort">
                    <div class="firstdiv">
                      <input v-model="opt.title" type="text">
                      <div class="addCircleBtn" @click="handleAddOpt(opt, optInd, topic)">+</div>
                      <div class="addCircleBtn" @click="handlesubCurOpt(opt, optInd, topic)">-</div>
                    </div>
                    <div class="imgandexplain" @click="handleImgOrExplain('img', opt, optInd, topic)">
                      <img v-if="opt.file" style="height: 23px;" :src="opt.file"/>
                      <span v-else>图片上传</span>
                    </div>
                    <div class="imgandexplain" @click="handleImgOrExplain('explain', opt, optInd, topic)">添加说明</div>
                    <div v-show="topic.type == 3 || topic.type==5" class="scoreclass">
                      <div><input :disabled="opt.titleValDisabled" v-model.number="opt.titleValue" type="number"></div>
                      <div class="requiredDiv">
                        <input v-model="opt.titleValDisabled" @change="handleisScoringChange($event, opt)" type="checkbox" :id="`bujifen${opt.sort}`">
                        <label :for="`bujifen${opt.sort}`">不计分</label>
                      </div>
                    </div>
                    <div class="upAndDown">
                      <span @click="handleMoveUp(opt, optInd, topic)">↑</span>
                      <span @click="handleMoveDown(opt, optInd, topic)">↓</span>
                    </div>
                  </div>
                </div>
                <button class="sureBtn" @click="submitEditRes(topic)">完&nbsp;成&nbsp;编&nbsp;辑</button>
              </div>
            </div>
          </div>
          <!-- 多选 -->
          <div class="other-topic" v-else-if="topic.type == 4"
            :class="{'hover': topic.isHover}"
            @mouseenter="handleMouseenter(topic)"
            @mouseleave="handleMouseleave(topic)"
          >
            <div class="checkbox">
              <div class="radioandCheckboxTitle">
                <span :class="{'addRequired': topic.isRequired == 1}">{{ getTopicOrder(topic) }}、</span>
                <span v-html="topic.title"></span>
                <span class="checkboxFont">【多选题】</span>
              </div>
              <div class="titleHint" v-show="topic.titleHint != ''" v-html="topic.titleHint"></div>
              <div class="radioandCheckboxOption" v-for="(checkbox, ind) in topic.solutionDtos" :key="ind">
                <div :class="{'optionAll': checkbox.file != ''}">
                  <div class="optiontit">
                    <div class="checkboxSquare"></div>
                    <div class="radioandCheckboxOptionFont">{{ checkbox.title }}</div>
                  </div>
                  <div class="optImg" v-show="checkbox.file != ''">
                    <img :src="checkbox.file" alt="选项文件">
                  </div>
                </div>
                <div class="optImgAndDesc">
                  <div class="optDesc" v-show="checkbox.desc != ''" v-html="checkbox.desc"></div>
                </div>
              </div>
            </div>

            <div class="foot-tool">
              <div class="foot-tool-left" @click="handleIsInsertTopic(topic, ind)">
                {{ insertTopic }}
                <div class="addTopic" v-show="topic.isOpenInsertDialog">
                  <button v-for="(btn, btnInd) in addTopic" :key="btnInd" @click="handleAddTopic(btn, btnInd, ind)">{{ typeDict[btn.type] }}</button>
                </div>
              </div>
              <div class="foot-tool-right">
                <div class="btn" @click="handleBtnEdit(topic, ind)">编辑</div>
                <div class="btn" @click="handleBtnCopy(topic, ind)">复制</div>
                <div class="btn" @click="handleBtnDel(topic, ind)">删除</div>
                <div class="btn" @click="handleBtnUp(topic, ind)">上移</div>
                <div class="btn" @click="handleBtnDown(topic, ind)">下移</div>
                <div class="btn" @click="handleBtntoUp(topic, ind)">置顶</div>
                <div class="btn" @click="handleBtntoDown(topic, ind)">置底</div>
              </div>
            </div>
            <!-- 编辑弹窗 -->
            <div class="edit-function" v-if="topic.isShowEdit">
              <Editor height="100" :value="editorTitle" @on-change="editorOnChange"/>
              <div class="dynamic-edit">
                <header>
                  <el-select size="small" v-model="topic.type" @change="handleSelectTopic($event, topic, ind)" placeholder="请选择">
                    <el-option
                      v-for="(val, key) in typeDict2"
                      :key="key"
                      :label="val.label"
                      :value="val.value">
                    </el-option>
                  </el-select>
                  <div class="requiredDiv">
                    <input v-model="topic.isRequired" type="checkbox" id="required">
                    <label for="required">必答</label>
                  </div>
                  <a href="javascript:;" @click="handleTitleHint(topic, ind)">填写提示</a>
                </header>
                <div class="edit-content"  v-show="topic.type != 6">
                  <div class="editTitle">
                    <div>选项文字</div>
                    <div>图片</div>
                    <div>说明</div>
                    <div v-show="topic.type == 3 || topic.type==5">分数</div>
                    <div>上移下移</div>
                  </div>
                  <div class="vforRender" v-for="(opt, optInd) in topic.solutionDtos" :key="opt.sort">
                    <div class="firstdiv">
                      <input v-model="opt.title" type="text">
                      <div class="addCircleBtn" @click="handleAddOpt(opt, optInd, topic)">+</div>
                      <div class="addCircleBtn" @click="handlesubCurOpt(opt, optInd, topic)">-</div>
                    </div>
                    <div class="imgandexplain" @click="handleImgOrExplain('img', opt, optInd, topic)">
                      <img v-if="opt.file" style="height: 23px;" :src="opt.file"/>
                      <span v-else>图片上传</span>
                    </div>
                    <div class="imgandexplain" @click="handleImgOrExplain('explain', opt, optInd, topic)">添加说明</div>
                    <div v-show="topic.type == 3 || topic.type==5" class="scoreclass">
                      <div><input :disabled="opt.titleValDisabled" v-model.number="opt.titleValue" type="number"></div>
                      <div class="requiredDiv">
                        <input v-model="opt.titleValDisabled" @change="handleisScoringChange($event, opt)" type="checkbox" :id="`bujifen${opt.sort}`">
                        <label :for="`bujifen${opt.sort}`">不计分</label>
                      </div>
                    </div>
                    <div class="upAndDown">
                      <span @click="handleMoveUp(opt, optInd, topic)">↑</span>
                      <span @click="handleMoveDown(opt, optInd, topic)">↓</span>
                    </div>
                  </div>
                </div>
                <button class="sureBtn" @click="submitEditRes(topic)">完&nbsp;成&nbsp;编&nbsp;辑</button>
              </div>
            </div>
          </div>
          <!-- 计分多选 -->
          <div class="other-topic" v-else-if="topic.type == 5"
            :class="{'hover': topic.isHover}"
            @mouseenter="handleMouseenter(topic)"
            @mouseleave="handleMouseleave(topic)"
          >
            <div class="checkbox">
              <div class="radioandCheckboxTitle">
                <span :class="{'addRequired': topic.isRequired == 1}">{{ getTopicOrder(topic) }}、</span>
                <span v-html="topic.title"></span>
                <span class="checkboxFont">【多选题】</span>
              </div>
              <div class="titleHint" v-show="topic.titleHint != ''" v-html="topic.titleHint"></div>
              <div class="radioandCheckboxOption" v-for="(checkbox, ind) in topic.solutionDtos" :key="ind">
                <div :class="{'optionAll': checkbox.file != ''}">
                  <div class="optiontit">
                    <div class="checkboxSquare"></div>
                    <div class="radioandCheckboxOptionFont">{{ checkbox.title }}</div>
                    <div class="scoreMark">（分值：{{ checkbox.titleValue }}）</div>
                  </div>
                  <div class="optImg" v-show="checkbox.file != ''">
                    <img :src="checkbox.file" alt="选项文件">
                  </div>
                </div>
                <div class="optImgAndDesc">
                  <div class="optDesc" v-show="checkbox.desc != ''" v-html="checkbox.desc"></div>
                </div>
              </div>
            </div>

            <div class="foot-tool">
              <div class="foot-tool-left" @click="handleIsInsertTopic(topic, ind)">
                {{ insertTopic }}
                <div class="addTopic" v-show="topic.isOpenInsertDialog">
                  <button v-for="(btn, btnInd) in addTopic" :key="btnInd" @click="handleAddTopic(btn, btnInd, ind)">{{ typeDict[btn.type] }}</button>
                </div>
              </div>
              <div class="foot-tool-right">
                <div class="btn" @click="handleBtnEdit(topic, ind)">编辑</div>
                <div class="btn" @click="handleBtnCopy(topic, ind)">复制</div>
                <div class="btn" @click="handleBtnDel(topic, ind)">删除</div>
                <div class="btn" @click="handleBtnUp(topic, ind)">上移</div>
                <div class="btn" @click="handleBtnDown(topic, ind)">下移</div>
                <div class="btn" @click="handleBtntoUp(topic, ind)">置顶</div>
                <div class="btn" @click="handleBtntoDown(topic, ind)">置底</div>
              </div>
            </div>
            <!-- 编辑弹窗 -->
            <div class="edit-function" v-if="topic.isShowEdit">
              <Editor height="100" :value="editorTitle" @on-change="editorOnChange"/>
              <div class="dynamic-edit">
                <header>
                  <el-select size="small" v-model="topic.type" @change="handleSelectTopic($event, topic, ind)" placeholder="请选择">
                    <el-option
                      v-for="(val, key) in typeDict2"
                      :key="key"
                      :label="val.label"
                      :value="val.value">
                    </el-option>
                  </el-select>
                  <div class="requiredDiv">
                    <input v-model="topic.isRequired" type="checkbox" id="required">
                    <label for="required">必答</label>
                  </div>
                  <a href="javascript:;" @click="handleTitleHint(topic, ind)">填写提示</a>
                </header>
                <div class="edit-content"  v-show="topic.type != 6">
                  <div class="editTitle">
                    <div>选项文字</div>
                    <div>图片</div>
                    <div>说明</div>
                    <div v-show="topic.type == 3 || topic.type==5">分数</div>
                    <div>上移下移</div>
                  </div>
                  <div class="vforRender" v-for="(opt, optInd) in topic.solutionDtos" :key="opt.sort">
                    <div class="firstdiv">
                      <input v-model="opt.title" type="text">
                      <div class="addCircleBtn" @click="handleAddOpt(opt, optInd, topic)">+</div>
                      <div class="addCircleBtn" @click="handlesubCurOpt(opt, optInd, topic)">-</div>
                    </div>
                    <div class="imgandexplain" @click="handleImgOrExplain('img', opt, optInd, topic)">
                      <img v-if="opt.file" style="height: 23px;" :src="opt.file"/>
                      <span v-else>图片上传</span>
                    </div>
                    <div class="imgandexplain" @click="handleImgOrExplain('explain', opt, optInd, topic)">添加说明</div>
                    <div v-show="topic.type == 3 || topic.type==5" class="scoreclass">
                      <div><input :disabled="opt.titleValDisabled" v-model.number="opt.titleValue" type="number"></div>
                      <div class="requiredDiv">
                        <input v-model="opt.titleValDisabled" @change="handleisScoringChange($event, opt)" type="checkbox" :id="`bujifen${opt.sort}`">
                        <label :for="`bujifen${opt.sort}`">不计分</label>
                      </div>
                    </div>
                    <div class="upAndDown">
                      <span @click="handleMoveUp(opt, optInd, topic)">↑</span>
                      <span @click="handleMoveDown(opt, optInd, topic)">↓</span>
                    </div>
                  </div>
                </div>
                <button class="sureBtn" @click="submitEditRes(topic)">完&nbsp;成&nbsp;编&nbsp;辑</button>
              </div>
            </div>
          </div>
          <!-- 填空 -->
          <div class="other-topic" v-else-if="topic.type == 6"
            :class="{'hover': topic.isHover}"
            @mouseenter="handleMouseenter(topic)"
            @mouseleave="handleMouseleave(topic)"
          >
            <div class="gapFilling">
              <div class="radioandCheckboxTitle">
                <span :class="{'addRequired': topic.isRequired == 1}">{{ getTopicOrder(topic) }}、</span>
                <span v-html="topic.title"></span>
              </div>
              <div class="titleHint" v-show="topic.titleHint != ''" v-html="topic.titleHint"></div>

              <textarea rows="3" v-model="topic.solutionDtos[0].title"></textarea>
            </div>

            <div class="foot-tool">
              <div class="foot-tool-left" @click="handleIsInsertTopic(topic, ind)">
                {{ insertTopic }}
                <div class="addTopic" v-show="topic.isOpenInsertDialog">
                  <button v-for="(btn, btnInd) in addTopic" :key="btnInd" @click="handleAddTopic(btn, btnInd, ind)">{{ typeDict[btn.type] }}</button>
                </div>
              </div>
              <div class="foot-tool-right">
                <div class="btn" @click="handleBtnEdit(topic, ind)">编辑</div>
                <div class="btn" @click="handleBtnCopy(topic, ind)">复制</div>
                <div class="btn" @click="handleBtnDel(topic, ind)">删除</div>
                <div class="btn" @click="handleBtnUp(topic, ind)">上移</div>
                <div class="btn" @click="handleBtnDown(topic, ind)">下移</div>
                <div class="btn" @click="handleBtntoUp(topic, ind)">置顶</div>
                <div class="btn" @click="handleBtntoDown(topic, ind)">置底</div>
              </div>
            </div>
            <!-- 编辑弹窗 -->
            <div class="edit-function" v-if="topic.isShowEdit">
              <Editor height="100" :value="editorTitle" @on-change="editorOnChange"/>
              <div class="dynamic-edit">
                <header>
                  <el-select size="small" v-model="topic.type" @change="handleSelectTopic($event, topic, ind)" placeholder="请选择">
                    <el-option
                      v-for="(val, key) in typeDict2"
                      :key="key"
                      :label="val.label"
                      :value="val.value">
                    </el-option>
                  </el-select>
                  <div class="requiredDiv">
                    <input v-model="topic.isRequired" type="checkbox" id="required">
                    <label for="required">必答</label>
                  </div>
                  <a href="javascript:;" @click="handleTitleHint(topic, ind)">填写提示</a>
                </header>
                <div class="edit-content"  v-show="topic.type != 6">
                  <div class="editTitle">
                    <div>选项文字</div>
                    <div>图片</div>
                    <div>说明</div>
                    <div v-show="topic.type == 3 || topic.type==5">分数</div>
                    <div>上移下移</div>
                  </div>
                  <div class="vforRender" v-for="(opt, optInd) in topic.solutionDtos" :key="opt.sort">
                    <div class="firstdiv">
                      <input v-model="opt.title" type="text">
                      <div class="addCircleBtn" @click="handleAddOpt(opt, optInd, topic)">+</div>
                      <div class="addCircleBtn" @click="handlesubCurOpt(opt, optInd, topic)">-</div>
                    </div>
                    <div class="imgandexplain" @click="handleImgOrExplain('img', opt, optInd, topic)">
                      <img v-if="opt.file" style="height: 23px;" :src="opt.file"/>
                      <span v-else>图片上传</span>
                    </div>
                    <div class="imgandexplain" @click="handleImgOrExplain('explain', opt, optInd, topic)">添加说明</div>
                    <div v-show="topic.type == 3 || topic.type==5" class="scoreclass">
                      <div><input :disabled="opt.titleValDisabled" v-model.number="opt.titleValue" type="number"></div>
                      <div class="requiredDiv">
                        <input v-model="opt.titleValDisabled" @change="handleisScoringChange($event, opt)" type="checkbox" :id="`bujifen${opt.sort}`">
                        <label :for="`bujifen${opt.sort}`">不计分</label>
                      </div>
                    </div>
                    <div class="upAndDown">
                      <span @click="handleMoveUp(opt, optInd, topic)">↑</span>
                      <span @click="handleMoveDown(opt, optInd, topic)">↓</span>
                    </div>
                  </div>
                </div>
                <button class="sureBtn" @click="submitEditRes(topic)">完&nbsp;成&nbsp;编&nbsp;辑</button>
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- 预览和保存 -->
      <div class="previewAndSave" :style="styles">
        <button @click="handlePreview">预览</button>
        <button @click="handleQnSave(true)" v-if="isShowViewSaveBtn">完成编辑</button>
        <button @click="complateQnSave" v-if="isShowViewSaveBtn">保 存</button>
      </div>
    </div>

    <!-- 选项图片上传 -->
    <input style="display: none;" type="file" ref="uploadFileInp" @change="handleUploadFile"/>
    <!-- 全局编辑弹窗 -->
    <AllEdit v-if="dialogVisible" ref="allEdit" :dialogVisible="dialogVisible" :isTitle="isTitle" :editVal="editorVal" @close="closeAlledit" @sure="alleditSure"/>
  </div>
</template>
<script>
import Editor from '@/components/Editor'
import AllEdit from './allEdit'
import { typeDict, typeDict2, editFunctionOption } from './constant'
import { getNewSort, getNumOfPage, copyObj, getParserHTML, getUploadImg } from './utils'
// import { addOrUpdate, getDetail } from "@/api/platform/templateManage";

export default {
  components: { Editor, AllEdit },
  data() {
    return {
      isTitle: false,// 控制标题是否显示input
      dialogVisible: false,
      editorVal: {
        editorContent: '',
        title: ''
      },
      qnTitle: "default title",
      isSubmit: false,
      isProcessing: false,
      explain: '点击添加问卷说明',
      // 问卷
      questionnaire: {
        // "createUser": "",
        // "createTime": "",
        // "updateUser": "",
        // "updateTime": "",
        "title": "标题",
        "typeId": "",
        // "status": "",
        "desc": "点击添加问卷说明",
        "resultDesc": "",
      },
      questionnaireList: [
        {
          isHover: false,
          isShowEdit: false,
          sortId: 0,
          isOpenInsertDialog: false,
          "title": "分页",
          "titleHint": "",
          "type": 0,
          // "page": "1",
          // "pageSort": "",
          "isRequired": 1,
          "sort": "",
          "solutionDtos": [
              {
                  "title": "分页",
                  // "titleValue": "",
                  "sort": 1,
                  "desc": "",
                  "file": ""
              }
          ]
        },
        // {
        //   isHover: false,
        //   isShowEdit: false,
        //   sortId: 1,
        //   isOpenInsertDialog: false,
        //   "title": "段落",
        //   "titleHint": "填写提示",
        //   "type": "1",
        //   "page": "分页页数",
        //   "pageSort": "分页中排序",
        //   "isRequired": "0",
        //   "sort": "排序,越小越靠前",
        //   "solutionDtos": [
        //       {
        //           "title": "答案标题",
        //           "titleValue": "答案分数",
        //           "sort": "排序,越小越靠前",
        //           "desc": "说明",
        //           "file": "文件"
        //       }
        //   ]
        // },
        // {
        //   isHover: false,
        //   isShowEdit: false,
        //   sortId: 2,
        //   isOpenInsertDialog: false,
        //   "title": "单选",
        //   "titleHint": "填写提示",
        //   "type": "2",
        //   "page": "分页页数",
        //   "pageSort": "分页中排序",
        //   "isRequired": "1",
        //   "sort": "排序,越小越靠前",
        //   "solutionDtos": [
        //       {
        //           "title": "选项1",
        //           "titleValue": "答案分数",
        //           "sort": "排序,越小越靠前",
        //           "desc": "说明",
        //           "file": "文件"
        //       },
        //       {
        //           "title": "选项2",
        //           "titleValue": "答案分数",
        //           "sort": "排序,越小越靠前",
        //           "desc": "说明",
        //           "file": "文件"
        //       }
        //   ]
        // },
        // {
        //   isHover: false,
        //   isShowEdit: false,
        //   sortId: 3,
        //   isOpenInsertDialog: false,
        //   "title": "计分单选",
        //   "titleHint": "填写提示",
        //   "type": "3",
        //   "page": "分页页数",
        //   "pageSort": "分页中排序",
        //   "isRequired": "1",
        //   "sort": "排序,越小越靠前",
        //   "solutionDtos": [
        //       {
        //         titleValDisabled: false,
        //           "title": "选项1",
        //           "titleValue": "答案分数",
        //           "sort": "排序,越小越靠前",
        //           "desc": "说明",
        //           "file": "文件"
        //       },
        //       {
        //         titleValDisabled: false,
        //           "title": "选项2",
        //           "titleValue": "答案分数",
        //           "sort": "排序,越小越靠前",
        //           "desc": "说明",
        //           "file": "文件"
        //       }
        //   ]
        // },
        // {
        //   isHover: false,
        //   isShowEdit: false,
        //   sortId: 4,
        //   isOpenInsertDialog: false,
        //   "title": "多选",
        //   "titleHint": "填写提示",
        //   "type": "4",
        //   "page": "分页页数",
        //   "pageSort": "分页中排序",
        //   "isRequired": "1",
        //   "sort": "排序,越小越靠前",
        //   "solutionDtos": [
        //       {
        //           "title": "选项1",
        //           "titleValue": "答案分数",
        //           "sort": "排序,越小越靠前",
        //           "desc": "说明",
        //           "file": "文件"
        //       },
        //       {
        //           "title": "选项2",
        //           "titleValue": "答案分数",
        //           "sort": "排序,越小越靠前",
        //           "desc": "说明",
        //           "file": "文件"
        //       }
        //   ]
        // },
        // {
        //   isHover: false,
        //   isShowEdit: false,
        //   sortId: 5,
        //   isOpenInsertDialog: false,
        //   "title": "计分多选",
        //   "titleHint": "填写提示",
        //   "type": "5",
        //   "page": "分页页数",
        //   "pageSort": "分页中排序",
        //   "isRequired": "1",
        //   "sort": "排序,越小越靠前",
        //   "solutionDtos": [
        //       {
        //         titleValDisabled: false,
        //           "title": "选项1",
        //           "titleValue": "答案分数",
        //           "sort": "0",
        //           "desc": "说明",
        //           "file": "文件"
        //       },
        //       {
        //         titleValDisabled: false,
        //           "title": "选项2",
        //           "titleValue": "答案分数",
        //           "sort": "1",
        //           "desc": "说明",
        //           "file": "文件"
        //       }
        //   ]
        // },
        // {
        //   isHover: false,
        //   isShowEdit: false,
        //   sortId: 6,
        //   isOpenInsertDialog: false,
        //   "title": "填空",
        //   "titleHint": "填写提示",
        //   "type": "6",
        //   "page": "分页页数",
        //   "pageSort": "分页中排序",
        //   "isRequired": "1",
        //   "sort": "排序,越小越靠前",
        //   "solutionDtos": [
        //       {
        //           "title": "答案标题",
        //           "titleValue": "答案分数",
        //           "sort": "排序,越小越靠前",
        //           "desc": "说明",
        //           "file": "文件"
        //       }
        //   ]
        // }
      ], // 对应数据中的 questDtos
      insertTopic: '在此题后插入一新题',
      typeDict,
      typeDict2,
      addTopic: editFunctionOption,
      // 当前编辑的题目数据
      curEditTopic: null,
      // 当前编辑的题目的填写提示
      curTopicHint: null,
      // 全局编辑窗记录谁打开
      editDialogOpen: 'title', // title是标题，hint是提示，explain说明
      // 单、多选说明图片记录当前选项
      curOption: null,
      // 编辑的富文本value
      editorTitle: '',
      timer: null,
      // 当前上传答案图片的题目
      currentOptImg: null
    }
  },
  props: {
    right: {
      type: Number,
      default: null
    },
    top: {
      type: Number,
      default: null
    },
    isShowViewSaveBtn: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    styles() {
      let style = {};
      if (this.right) {
        style.right = `${this.right}px`;
      }
      if (this.top) {
        style.top = `${this.top}px`;
      }
      return style;
    },
  },
  watch: {
    questionnaireList: {
      handler(val) {
        if (val) {
          clearInterval(this.timer)
          this.timer = null
          this.addTimer()
        }
      },
      deep: true
    }
  },
  mounted() {
    this.addTimer()
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  },
  beforeDestroy() {
    window.removeEventListener('beforeunload', this.handleBeforeUnload);
    clearInterval(this.timer)
  },
  methods: {
    handleBeforeUnload(e){
      const confirmMessage = '重新加载吗？会丢失页面内容';
      e.returnValue = confirmMessage;
      return confirmMessage;
    },
    handleMouseenter(item){
      if(item.isShowEdit) return
      item.isHover = true
    },
    handleMouseleave(item){
      item.isHover = false
    },
    getTopicOrder(item) {
      // 计算题目顺序，除去分页和段落
      let newList = this.questionnaireList.filter((qnItem) => {
        if (qnItem.type != '0' && qnItem.type != '1') {
          return qnItem
        }
      })
      return (newList.findIndex(newItem => newItem.sortId === item.sortId)) + 1
    },
    // 计算分页
    getNumOfPage,

    // 在此题下插入一题的事件
    handleIsInsertTopic(item) {
      if (item.isOpenInsertDialog) {
        this.insertTopic = '在此题后插入一新题'
        item.isOpenInsertDialog = false
      } else {
        this.insertTopic = '取消插入新题'
        item.isOpenInsertDialog = true
      }
    },
    // 插入新题
    handleAddTopic(item, btnInd, ind) {
      let newItem = JSON.parse(JSON.stringify(item))
      const newTopic = {
        ...newItem,
        sortId: new Date().getTime(),
        isShowEdit: newItem.type == 0 ? false : true
      }
      this.questionnaireList.splice(ind + 1, 0, newTopic)
      this.curEditTopic = newTopic
      this.editorTitle = newTopic.title
    },
    // 编辑、赋值、删除、上下移、置顶底
    handleBtnEdit(item){
      // 显示当前题目编辑框
      item.isShowEdit = !item.isShowEdit
      this.curEditTopic = item
      this.editorTitle = item.title
    },
    handleBtnCopy(item, ind){
      let newItem = JSON.parse(JSON.stringify(item))
      const newData = {...newItem, sortId: new Date().getTime()}
      this.questionnaireList.splice(ind + 1, 0, newData)
    },
    handleBtnDel(item, ind){
      this.questionnaireList.splice(ind, 1)
    },
    handleBtnUp(topic, ind){
      if (ind > 0) {
        const item = this.questionnaireList.splice(ind, 1)[0]
        this.questionnaireList.splice(ind - 1, 0, item)
      }
    },
    handleBtnDown(topic, ind){
      if (ind < this.questionnaireList.length - 1) {
        const item = this.questionnaireList.splice(ind, 1)[0]
        this.questionnaireList.splice(ind + 1, 0, item)
      }
    },
    handleBtntoUp(item, ind){
      this.questionnaireList.splice(ind, 1)
      this.questionnaireList.splice(1, 0, item)
    },
    handleBtntoDown(item, ind) {
      this.questionnaireList.splice(ind, 1)
      this.questionnaireList.push(item)
    },

    // 编辑框中选择修改题目类型
    handleSelectTopic(e, topic, ind) {
      const findTopic = this.addTopic.find(item => item.type == e)
      let newTopic = JSON.parse(JSON.stringify(findTopic))
      const data = {
        ...newTopic,
        sortId: new Date().getTime(),
        isShowEdit: newTopic.type == 0 ? false : true // 默认换题后打开编辑框
      }
      this.questionnaireList.splice(ind, 1, data)
      this.curEditTopic = data
      this.editorTitle = data.title
    },


    // 完成编辑题目
    submitEditRes(topic) {
      topic.isShowEdit = false
      topic.isHover = false
      // 给需要排序的选项赋值
      if (topic.type != 0 && topic.type != 1 && topic.type != 6) {
        topic.solutionDtos = getNewSort(topic.solutionDtos)
      }
      this.curEditTopic = null
      // 每完成一题目保存一次，现在涉及第一次保存要拿到id问题
      // this.complateQnSave()
    },
    // 是否计分单多选
    handleisScoringChange(e, item) {
      item.titleValue = 0
      if (e.target.checked) {
        item.titleValDisabled = true
      } else {
        item.titleValDisabled = false
      }
    },
    // 添加、删除选项
    handleAddOpt(curopt, optInd, curTopic){
      let newOpt = copyObj(curopt)
      curTopic.solutionDtos.splice(optInd + 1, 0, {
        ...newOpt,
        title: '选项' + (curTopic.solutionDtos.length + 1),
        titleValue: '0',
        sort: new Date().getTime(),
        titleValDisabled: false
      })
    },
    handlesubCurOpt(curopt, optInd, curTopic){
      curTopic.solutionDtos.splice(optInd, 1)
    },

    // 添加说明和图片
    handleImgOrExplain(src, curopt) {
      if (src === 'img') {
        this.currentOptImg = null
        this.$nextTick(() => {
          this.$refs.uploadFileInp.click()
        })
        this.currentOptImg = curopt
      } else {
        this.dialogVisible = true
        this.editDialogOpen = 'explain'
        this.curOption = curopt
        this.editorVal.editorContent = curopt.desc
      }
    },
    // 题目选项上传图片方法
    handleUploadFile(e){
      const file = e.target.files[0]
      getUploadImg(file).then(url => {
        this.currentOptImg.file = url
      })
    },

    // 填写提示
    handleTitleHint(topic) {
      this.dialogVisible = true
      this.isTitle = false
      this.curTopicHint = topic
      this.editDialogOpen = 'hint'
      this.editorVal.editorContent = topic.titleHint
    },

    // 移动选项
    handleMoveUp(curopt, ind, curTopic){
      if (ind > 0) {
        const item = curTopic.solutionDtos.splice(ind, 1)[0]
        curTopic.solutionDtos.splice(ind - 1, 0, item)
      }
    },
    handleMoveDown(curopt, ind, curTopic){
      if (ind < curTopic.solutionDtos.length - 1) {
        const item = curTopic.solutionDtos.splice(ind, 1)[0]
        curTopic.solutionDtos.splice(ind + 1, 0, item)
      }
    },

    // 富文本编辑事件
    editorOnChange({ html }) {
      if (this.curEditTopic != null) {
        this.curEditTopic.title = getParserHTML(html)
      }
    },

    handleChange() {
      if (this.questionnaire.title != '') this.isSubmit = false
    },
    submitQnTitle() {
      if (this.questionnaire.title == '') {
        this.isSubmit = true
        return
      }
      this.isProcessing = false
    },

    // 打开编辑问卷标题
    handleOpenEditTitle() {
      // 是否隐藏预览和保存按钮
      if(!this.isShowViewSaveBtn) return
      this.dialogVisible = true
      this.isTitle = true
      this.editDialogOpen = 'title'
      if (this.questionnaire.desc != '' || this.questionnaire.title != '') {
        this.editorVal.editorContent = this.questionnaire.desc == this.explain ? "" : this.questionnaire.desc
        this.editorVal.title = this.questionnaire.title
      }
      this.$nextTick(() => {
        this.$refs.allEdit.title = this.questionnaire.title
      })
    },

    closeAlledit(val){
      this.dialogVisible = val
      this.editDialogOpen = ''
      this.curTopicHint = null
      this.curOption = null
      this.editorVal = {
        editorContent: '',
        title: '',
      }
      this.isTitle = false
    },
    alleditSure(val){
      const { title, html } = val
      if (this.editDialogOpen == 'title') {
        this.questionnaire.title = title
        this.questionnaire.desc = getParserHTML(html)
        this.complateQnSave()
      } else if (this.editDialogOpen == 'hint') {
        this.curTopicHint.titleHint = getParserHTML(html)
      } else if (this.editDialogOpen == 'explain') {
        this.curOption.desc = getParserHTML(html)
      }
      this.closeAlledit(false)
    },

    // 预览和完成编辑
    handlePreview() {
      let qnData = {
        ...this.questionnaire,
        questDtos: getNewSort(this.questionnaireList)
      }
      this.$emit('on-preview', qnData)
    },
    handleQnSave() {
      let qnData = {
        ...this.questionnaire,
        questDtos: getNewSort(this.questionnaireList)
      }
      this.$emit('on-save', qnData)
    },
    complateQnSave() {
      this.$emit('on-editsave', {
        ...this.questionnaire,
        questDtos: getNewSort(this.questionnaireList)
      })
    },
    // 计时器保存
    addTimer() {
      this.timer = setInterval(() => {
        setTimeout(() => this.complateQnSave(), 0)
      }, 1000 * 60 * 5)
    },
    // 供父组件调用获取数据
    offerQnData() {
      return {
        ...this.questionnaire,
        questDtos: getNewSort(this.questionnaireList)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
*{
  padding: 0;
  margin: 0;
}
.questionnaire {
  width: 100%;
  .create-qn {
    width: 60%;
    height: 500px;
    margin: 0 auto;

    >header{
      margin: 10px 0;
      font-size: 20px;
    }

    .create-qn-content {
      width: 100%;
      background-color: #fff;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 10px 20px;

      display: flex;
      flex-direction: column;
      align-items: center;

      >h4{
        text-align: center;
        margin: 20px 0;
      }
      .el-button{
        margin: 20px 0 30px;
        padding: 12px 20px;
      }
      label{
        display: inline-block;
        width: 100%;
        color: red;
        font-size: 14px;
      }
    }
  }


  .questionnaire-content {
    width: 100%;
    height: calc(100vh - 120px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: scroll;

    .previewAndSave{
      position: fixed;
      right: 25px;
      top: 110px;
      width: 100px;
      >button{
        display: inline-block;
        width: 100%;
        height: 40px;
        background-color: #009494;
        border-radius: 5px;
        border-color: #009494;
        color: #fff;
        margin-top: 10px;
      }
    }

    // .hover:hover{
    //   background-color: #fafafa;
    //   cursor: pointer;
    //   &>.foot-tool{
    //     display: flex;
    //   }
    // }
    .hover{
      background-color: #fafafa;
      cursor: pointer;
      &>.foot-tool{
        display: flex !important;
      }
    }

    @mixin pubPadding{
      border-bottom: 1px solid #ccc;
      box-sizing: border-box;
      padding: 0 10px;
    }

    .form-content{
      width: 60%;
      background-color: #fff;
      // 阴影
      box-shadow: 0px 0px 10px #ccc;

      &::after{
        // 作用就是垫高内容区域
        content: '';
        display: block;
        width: 100%;
        height: 300px;
      }

      .form-title{
        @include pubPadding;
        width: 100%;
        min-height: 100px;
        &:hover{
          background-color: #fafafa;
          cursor: pointer;
        }
        h2{
          text-align: center;
          line-height: 60px;
        }
        .explain{
          width: 100%;
          overflow: auto;
        }
      }

      .paging{
        @include pubPadding;
        width: 100%;
        height: 100px;
        font-size: 14px;
        color: #6a6a6a;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        position:relative;
      }
      .foot-tool{
        position: absolute;
        left: 0;
        bottom: 1px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 10px;
        display: none;
        // background-color: #bfa;

        //<!-- 新增题目弹窗
        .addTopic{
          position: absolute;
          z-index: 1;
          top: 20px;
          left: 0;
          height: 60px;
          background-color: #ebe5e5;
          border-radius: 5px;
          display: flex;
          justify-content: center;
          align-items: center;
          >button{
            box-sizing: border-box;
            padding: 5px 10px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 14px;
            margin: 0 4px;
            &:hover{
              background-color: #409EFF;
              color: #fff;
              border: 1px solid transparent;
            }
          }
        }
        .foot-tool-left{
          font-size: 14px;
          color: #409EFF;
          cursor: pointer;
          text-decoration: underline;
          &:hover{
            color: red;
          }
        }
        .foot-tool-right{
          display: flex;
          .btn{
            width: 40px;
            height: 20px;
            outline: 1px solid;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            margin-left: 10px;
            border-radius: 2px;
            &:hover{
              cursor: pointer;
              color: #409EFF;
            }
          }
        }
      }
      .first-page{
        position: relative;
      }

      // vfor渲染的选项样式
      .other-topic{
        @include pubPadding;
        position: relative;
        width: 100%;
        // min-height: 200px;

        // 单、多选下的填写提示
        .titleHint{
          width: 100%;
          line-height: 18px;
          color: #666;
          font-size: 14px;
          padding-top: 8px;
          overflow: auto;
        }

        // 单\多选、计分单\多选下的样式
        .addRequired{
          &::before{
            content: '*';
            color: #f00;
            font-weight: bold;
          }
        }

        .radioandCheckboxTitle{
          display: flex;
          align-items: center;
          font-size: 17px;
          color: #262626;
          width: 100%;
          >span:nth-child(2){
            display: inline-block;
            width: 100%;
            overflow: auto;
            >p{
              width: 100%;
              img{
                width: 100px;
              }
            }
          }
          .checkboxFont{
            display: inline-block;
            width: 180px;
            font-size: 14px;
            color: #999;
          }
        }
        .radioandCheckboxOption{
          margin: 10px;
          .optiontit{
            display: flex;
            align-items: flex-end;
          }

          @mixin circleAndSquare{
            width: 16px;
            height: 16px;
            border: 1px solid #a3a3a3;
            margin-right: 5px;
          }
          .radioCircle{
            @include circleAndSquare;
            border-radius: 50%;
          }
          .checkboxSquare{
            @include circleAndSquare;
          }
          .radioandCheckboxOptionFont{
            font-size: 15px;
            color: #595959;
          }
          .scoreMark{
            color:#efa030;
            font-size:14px;
          }

          // 选项说明和图片
          .optImgAndDesc{
            width: 100%;
            overflow: auto;
            .optDesc{
              font-size: 14px;
              color: #999;
              margin-left: 17px;
            }

          }
          .optionAll{
            border: 1px solid #e5e5e5;
            padding: 2px 10px;
          }
          .optImg{
              width: 100%;
              height: 100px;
              // margin-top: 10px;
              img{
                height: 100%;
              }
            }
        }
      }

      // 公共的，在每个题目下都有的样式，内边距
      @mixin pubTopicPadding{
        box-sizing: border-box;
        padding: 20px 30px;
      }
      .paragraph{
        @include pubTopicPadding;
        width: 100%;
        min-height: 100px;
        overflow: hidden;
        >p{
          width: 100%;
          img{
            max-width: 100%;
          }
        }
      }

      // 填空
      .gapFilling{
        @include pubTopicPadding;
        >textarea{
          width: 100%
        }
      }
      .radio{
        @include pubTopicPadding;
        font-size: 17px;
      }
      .checkbox{
        @include pubTopicPadding;
      }
      .edit-function{
        // width: 100%;
        // position: absolute;
        // bottom: inherit;
        // left: 0;
        // background-color: #409EFF;
        // &::after{
        //   content: '';
        //   height: 200px;
        //   background-color: green;
        // }
        box-sizing: border-box;
        padding:10px 5px;
        background-color: #fafafa;
        border-radius: 5px;
        margin-bottom: 10px;
        .dynamic-edit{
          >header{
            display: flex;
            align-items: center;
            margin: 10px 0;
            .requiredDiv{
              margin: 0 10px;
              label{
                font-size: 14px;
              }
            }
            >a{
              font-size: 14px;
              &:hover{
                color: #409EFF;
              }
            }
          }
          .edit-content{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .editTitle{
              width: 100%;
              height: 20px;
              background-color: #ccc;
              font-size: 12px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              >div:nth-child(1){
                width: 235px;
                flex-grow: 2;
              }
              >div:nth-child(2){
                width: 25px;
                flex-grow: 1;
              }
              >div:nth-child(3){
                width: 25px;
                flex-grow: 1;
              }
              >div:nth-child(4){
                width: 125px;
                flex-grow: 1;
              }
            }

            .vforRender{
              margin: 10px 0;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .firstdiv{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-grow: 3;
                >input{
                  width: 83%;
                }
                .addCircleBtn{
                  width: 16px;
                  height: 16px;
                  border-radius: 50%;
                  border: 1px solid #a3a3a3;
                  color:#a3a3a3;
                  display: flex;
                  justify-content: center;
                  align-items: flex-end;
                  margin-left: 5px;
                  &:hover{
                    cursor: pointer;
                    color: #409EFF;
                    border: 1px solid #409EFF;
                  }
                }
              }
              .imgandexplain{
                font-size: 12px;
                flex-grow: 1;
                &:hover{
                  cursor: pointer;
                  color: #409EFF;
                }
              }
              .scoreclass{
                display: flex;
                align-items: center;
                flex-grow: 1;
                input{
                  width: 50px;
                }
              }
              .upAndDown{
                flex-grow: 0;
                >span{
                  display: inline-block;
                  width: 20px;
                  height: 20px;
                  border: 1px solid #a3a3a3;
                  color: #a3a3a3;
                  text-align: center;
                  vertical-align: top;
                  margin-left: 5px;
                  &:hover{
                    cursor: pointer;
                    color: #409EFF;
                    border: 1px solid #409EFF;
                  }
                }
              }
            }
          }
        }
        .sureBtn{
          width: 100%;
          height: 36px;
          color: #fff;
          background: #409EFF;
          border: 1px solid #409EFF;
          border-radius: 5px;
          font-size: 14px;
          &:hover{
            background-color: #66b1ff;
            border-color: #66b1ff;
          }
        }

      }
    }
  }
}
</style>
